<template>
	<view>
		<view style="width: 100%;height: 400rpx;text-align: center;" @click="chooseImg">
			<view v-if="orgRequest.avatar==null"
				style="width: 100%;height: 100%;background-color: #DCDFE6;display: flex;justify-content: center;align-items: center;">
				点击上传社团封面</view>
			<img v-else style="width: 100%;height: 100%;width: 96%;margin-top: 2%;" :src="orgRequest.avatar" alt="">
		</view>
		<view style="margin-top: 40rpx;display: flex;justify-content: center;">
			<uni-forms :value="orgRequest" ref="form">
				<uni-forms-item name="name">
					<uni-easyinput type="text" v-model="orgRequest.name" placeholder="请输入社团名" />
				</uni-forms-item>
				<uni-forms-item name="introduction">
					<textarea style="border: 1rpx solid #DCDFE6;" type="text" v-model="orgRequest.introduction"
						placeholder="请输入社团简介" :maxlength="250" />
				</uni-forms-item>
				<button @click="apply" type="primary">申请创建社团</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orgRequest: {
					avatar: null,
					name: null,
					introduction: null
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '社团名不能为空'
						}]
					},
					introduction: {
						rules: [{
							required: true,
							errorMessage: '社团简介不能为空'
						}]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			// 选择图片
			chooseImg() {
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						that.orgRequest.avatar = res.tempFilePaths[0];
					}
				});
			},
			// 申请创建社团
			apply() {
				this.$refs.form.submit().then(res => {
					this.$http.request({
						url: '/organizations/web/organization/create',
						method: 'POST',
						filePath: this.orgRequest.avatar,
						name: 'file',
						formData: {
							name: this.orgRequest.name,
							introduction: this.orgRequest.introduction
						},
						type: 'upload'
					}).then(res => {
						res = res.data;
						res = JSON.parse(res);
						if (res.result) {
							uni.showModal({
								content: res.msg,
								showCancel:false
							})
							// 清空数据
							this.orgRequest.avatar = null;
							this.orgRequest.name = null;
							this.orgRequest.introduction = null;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style>
</style>
